<template>
  <div class="common-layout">
    <el-row :gutter="40" v-for="(row, rowIndex) in chunkedImgList" :key="rowIndex">
      <el-col :span="6" v-for="img in row" :key="img.id">
        <div class="grid-content ep-bg-purple" @click="viewImage(img)">
          <img :src="img.url" :alt="img.id" class="image" />
        </div>
        <div class="ep-text-white">
          <div style="margin-top: 10px">{{ img.address }}</div>
          <div style="margin-top: 10px; margin-bottom: 10px">{{ img.time }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-dialog title="图片详情" v-model="dialogVisible" width="800px" :close-on-click-modal="false">
    <el-form>
      <el-form-item>
        <img :src="checkImage" class="image" />
      </el-form-item>
      <el-form-item>
        <div class="dialog-item">拍摄风格：{{ checkStyle }}</div>
      </el-form-item>
      <el-form-item>
        <div class="dialog-item">拍摄地点：{{ checkAddress }}</div>
      </el-form-item>
      <el-form-item>
        <div class="dialog-item">拍摄时间：{{ checkTime }}</div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import bg1 from '../../assets/bg.jpg'
import bg5 from '../../assets/bg.jpg'
import bg6 from '../../assets/bg.jpg'
import bg7 from '../../assets/bg.jpg'
import bg8 from '../../assets/bg.jpg'

const dialogVisible = ref(false)
const checkImage = ref(null)
const checkStyle = ref(null)
const checkAddress = ref(null)
const checkTime = ref(null)

const imgList = ref([
  { id: '1', url: bg1, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  {
    id: '2',
    url: 'https://img.yzcdn.cn/vant/apple-1.jpg',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '风景',
  },
  {
    id: '3',
    url: 'https://img.yzcdn.cn/vant/apple-3.jpg',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '风景',
  },
  {
    id: '4',
    url: 'https://img.yzcdn.cn/vant/apple-2.jpg',
    address: '北京市朝阳区',
    time: '2021-09-01 12:00:00',
    type: '风景',
  },
  { id: '5', url: bg5, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '6', url: bg6, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '7', url: bg7, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '8', url: bg8, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '9', url: bg1, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '10', url: bg5, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '11', url: bg6, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '12', url: bg7, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '13', url: bg8, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '14', url: bg1, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '15', url: bg5, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '16', url: bg6, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '17', url: bg7, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
  { id: '18', url: bg8, address: '北京市朝阳区', time: '2021-09-01 12:00:00', type: '风景' },
])

const chunkedImgList = computed(() => {
  const chunkSize = 4
  const chunks = []
  for (let i = 0; i < imgList.value.length; i += chunkSize) {
    chunks.push(imgList.value.slice(i, i + chunkSize))
  }
  return chunks
})

const viewImage = (img) => {
  console.log('查看图片', img)
  dialogVisible.value = true
  checkImage.value = img.url
  checkStyle.value = img.type
  checkAddress.value = img.address
  checkTime.value = img.time
}
</script>

<style scoped>
.common-layout {
  padding: 20px;
  max-height: 80vh;
  overflow: auto;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 30px;
}
.grid-content {
  width: 100%;
  height: 250px;
  min-height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
  background-color: #f5f7fa;
}
.image {
  max-width: 100%;
  max-height: 100%;
}
.ep-text-white {
  color: rgb(116, 112, 112);
  font-weight: bold;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
}
.dialog-item {
  font-size: 20px;
  font-weight: bold;
}
</style>
